<template>
  <main class="wss-container">
    <div class="label-box-content">
      <NewCard title="商机设置">
        <div class="certificate">
          <h3>来源</h3>
          <el-form
            :model="expert"
            ref="certificateForm"
            label-width="100px"
            label-position="left"
          >
            <div
              class="addcertBox"
              v-for="(item, index) in expert.sourceList"
              :key="index"
            >
              <div class="addcertTitle">
                <el-row>
                  <!-- <el-col :span="12">
                     <el-form-item label="来源" :prop="'sourceList.'+index + '.no'" :rules="{
                    required: true, message: '请输入来源', trigger: 'blur'
                }">
                    <el-input v-model="item.name" placeholder="请填写来源" @change="sourcevalues(item, index)"></el-input>
                    </el-form-item>
                  </el-col> -->
                   <el-col :span="12">
                     <el-form-item label="来源" >
                    <el-input v-model="item.name" placeholder="请填写来源" @change="sourcevalues(item, index)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <div>
                      <i
                        class="el-icon-circle-plus-outline"
                        @click="addsource"
                      ></i>
                      <i
                        class="el-icon-remove-outline"
                        @click="removesource(item)"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-form>
        </div>
        <div class="certificate">
          <h3>状态</h3>
          <el-form
            :model="expert"
            ref="statuslist"
            label-width="100px"
            label-position="left"
          >
            <div
              class="addcertBox"
              v-for="(ele, index) in expert.statuslist"
              :key="index"
            >
              <div class="addcertTitle">
                <el-row>
                  <el-col :span="12">
                     <el-form-item label="状态" >
                    <el-input v-model="ele.name"  @change="statusvalues(ele, index)" placeholder="请填写状态" ></el-input>

                </el-form-item>
                  <!-- <el-form-item label="状态" :prop="'statuslist.'+index + '.no'" :rules="{
                    required: true, message: '请输入状态', trigger: 'blur'
                }">
                    <el-input v-model="ele.name"  @change="statusvalues(ele, index)" placeholder="请填写状态" ></el-input>

                </el-form-item> -->
                  </el-col>
                  <el-col :span="12">
                    <div>
                      <i
                        class="el-icon-circle-plus-outline"
                        @click="addstatus"
                      ></i>
                      <i
                        class="el-icon-remove-outline"
                        @click="removestatus(ele)"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-form>
         
        </div>
        <div class="submitbtn">
          <el-row>
            <el-button type="primary" class="addBtn" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">取消</el-button>
          </el-row>
        </div>
      </NewCard>
    </div>
  </main>
</template>
<script>
import NewCard from "../../../components/newCard.vue";
import {
  addopportunisetingApi ,
} from "../../../newApi_3-24/opportuniseting/index";

export default {
  components: {
    NewCard,
  },
  data() {
    return {
      //专家信息
      expert: {
        // 来源数据集合
        sourceList: [
          {
            type:"o_from",
            name: "",
            value:""
          },
        ],
        statuslist:[
          {
            type:"o_status",
            name:"",
            value:""
          }
        ]
      },
    };
  },
  created() {

  },
  methods: {
    //name跟value值绑定
    sourcevalues(item,index){
      item.value=item.name
    },
    statusvalues(item,index){
      item.value=item.name
    },
     //查詢赋值记录
    async addopportunisetingApifn(data) {
      let { code, rows } = await addopportunisetingApi(data);
      if (code == 200) {
        this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
        
      }
    },
    submitForm(){
      let expert = this.expert.sourceList.concat(this.expert.statuslist)
      console.log(this.expert.sourceList.concat(this.expert.statuslist),"111")
      this.addopportunisetingApifn(expert);
    },
     resetForm() {
       
      },
    // 新增一条来源
    addsource() {
      this.expert.sourceList.push({
         type:"o_from",
         name:"",
         value:""
      });
    },
    // 删除一条来源
    removesource(item) {
      var index = this.expert.sourceList.indexOf(item);
      if (index < 1) {
        this.$message("删除失败，至少要有一个证书！");
      } else {
        this.expert.sourceList.splice(index, 1);
      }
    },
    // 新增一个状态
     addstatus() {
      this.expert.statuslist.push({
         type:"o_status",
         name:"",
         value:""
      });
    },
    // 删除一个状态
    removestatus(item) {
      var index = this.expert.statuslist.indexOf(item);
      if (index < 1) {
        this.$message("删除失败，至少要有一个证书！");
      } else {
        this.expert.statuslist.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
  background-color: rgba(123, 123, 123, 0.2);
  .title {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 20px;
  }
}
</style>
<style scoped>
h3 {
  font-weight: 700;
}
.addcertBox .addcertTitle {
  font-size: 14px;
  color: #666;
  font-weight: bold;
}
.addcertBox .el-select {
  width: 100%;
}
.addcertBox .addcertTitle i {
  font-size: 18px;
  color: #999999;
  margin-left: 15px;
  margin-top: 10px;
  cursor: pointer;
}
.submitbtn{
  margin-left: 100px;
}
</style>